<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:include="admin/common :: head"></div>
    <link href="/static/css/main.css" rel='stylesheet' type='text/css'/>
    <link href="/static/css/list.css" rel='stylesheet' type='text/css'/>
    <link href="/static/lib/layui/layui.css" rel="stylesheet" type="text/css" />
    <link href="/static/lib/jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <title>设备搜索</title>
</head>
<body>
<!-- NAV头部搜索模块 -->
<div class="searchs">
    <div class="wrapper">
        <div class="fl" log-mod="search">
            <div class="search-txt">
                    <div class="search-tab">
                        <i class="icon" data-bl="switch"></i>
                        <div data-bl="switch" class="check">关键词</div>
                        <div class="txt-search">
                            <input class="left txt" name="keyword" autocomplete="off"
                                   placeholder="如KKS、故障现象等" id="keyword-box"
                                 value=""/>
                        </div>
                    </div>
                    <button type="submit"  id="kksSearch" class="act-search btn home-ico ico-search LOGCLICKEVTID">
                        搜索
                    </button>

            </div>
        </div>

    </div>
    <div class="mt-20">
        <table id="data-table"
               class="table table-border table-bordered table-bg table-hover table-sort table-responsive"
               style="width: 100%">
            <thead>
            <tr class="text-c">
                <th  width="10%">ID</th>
                <th  width="10%">CR编号</th>
                <th  width="10%">KKS</th>
                <th  width="10%">时间</th>
                <th  width="20%">主题</th>
                <th  width="20%">原因分析</th>
                <th  width="20%">下一步行动</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

<footer th:include="admin/common :: footer"></footer>
<script type="text/javascript" src="/static/lib/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script src="/static/lib/layui/layui.js" type="text/javascript"></script>
<script th:inline="javascript" type="text/javascript">

    var data = {};
    function locate_url(start, size) {
        var keywords = $('#keyword-box').val();
        if (typeof(keywords) !== 'undefined' && keywords !== null && keywords.length > 0) {
            data.keyword = keywords;
        }

        var target = '/search/kks?';
        $.each(data, function (key, value) {
            target += (key + '=' + value + '&');
        });
        target += 'start=' + start + '&size=' + size;
        return target;
    }
    $(function () {

        /*$('#searchForm').submit(function () {
            window.location.href = locate_url(start, size);
            return false;
        });*/

        $('#keyword-box').autocomplete({
            minLength: 2, // 最小字符数，默认1
            delay: 300, // 延迟加载300ms
            source: function (request, response) { // 数据源
                $.ajax({
                    url: '/search/kks/autocomplete?prefix=' + request.term,
                    success: function (res) {
                        if (res.code === 200) {
                            response(res.data);
                        }
                    }
                });
            },
            select: function (event, ui) { // 选中事件
                $('#keyword-box').text(ui.item.value);
                $("#keyword-box").val(ui.item.value);
                reloadTable();
                //window.location.href = locate_url(0, 20);
            }
        });

    });

</script>
<script type="text/javascript" src="/static/lib/datatables/1.10.15/jquery.dataTables.js"></script>
<script type="text/javascript" src="/static/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="/static/js/admin/cr-list.js"></script>
</body>
</html>